<template>
  <div>
    <van-nav-bar title="订单结算"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <van-contact-card type="add"
                      @click="onAdd"
                      v-if="Address.length <= 0" />
    <van-contact-card type="edit"
                      :tel="Address.mobile"
                      :name="Address.consignee"
                      @click="onEdit"
                      v-else />
    <van-card v-for="item of data"
              :key="item.id"
              :num="item.nums"
              :price="item.total"
              :desc="'单价：'+item.price"
              :title="item.product.name"
              :thumb="item.product.cover_cdn" />
    <van-field v-model="content"
               rows="2"
               autosize
               label="订单备注"
               type="textarea"
               maxlength="50"
               placeholder="请输入订单备注"
               show-word-limit />
    <van-submit-bar :price="total"
                    button-text="提交订单"
                    @submit="onSubmit" />
  </div>
</template>
<script>
export default {
  created() {
    let ids = this.$route.query.ids

    if (!ids) {
      this.$notify({
        type: 'danger',
        message: '请选择结算的商品',
        duration: 1500,
      })
      return false
    }
    this.ids = ids
    this.CartList()
    let address = this.$cookies.get('AddressOrder')
      ? this.$cookies.get('AddressOrder')
      : {}

    if (address) {
      this.Address = address
    } else {
        this.AddressOrder()
    }
  },
  computed: {
    total() {
      let total = 0

      for (let item of this.data) {
        total += parseFloat(item.total)
      }

      return total * 100
    },
  },
  data() {
    return {
      LoginUser: this.$cookies.get('LoginUser')
        ? this.$cookies.get('LoginUser')
        : {},
      Address: {},
      ids: '',
      data: [],
      content: '',
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onEdit() {
      this.$router.push({
        path: '/user/address/index',
        query: { order: 'order' },
      })
    },
    async AddressOrder() {
      let data = {
        userid: this.LoginUser.id,
      }
      let result = await this.$api.AddrOrder(data)
      console.log(result);
      if (result.code === 1) {
        this.Address = result.data
      } else {
        this.Address = []
      }
    },
    async CartList() {
      let data = {
        ids: this.ids,
      }
      let result = await this.$api.OrderData(data)
      if (result.code === 1) {
        this.data = result.data
      } else {
        this.$notify({
          type: 'danger',
          message: result.msg,
          duration: 1500,
        })

        this.$router.go(-1)

        return false
      }
    },
    onAdd() {},
    async onSubmit() {
      let data = {
        userid: this.LoginUser.id,
        ids: this.ids,
        addrid: this.Address.id,
        content: this.content,
      }
      let result = await this.$api.Confirm(data)
      if (result.code === 1) {
        this.$notify({
          type: 'success',
          message: result.msg,
          duration: 1500,
          onClose: () => {
            this.$router.push({
              path: '/order/order/info',
              query: { orderid: result.data.orderid,query:{user:this.userid} },
            })
          },
        })
        return false
      } else {
        this.$notify({
          type: 'danger',
          message: result.msg,
          duration: 1500,
        })
        return false
      }
    },
  },
}
</script>